<template>
    <!-- pages/userInfo/userInfo.wxml -->
    <view class="page">
        <view class="box_11">
            <view class="block_2">
                <image class="single-avatar_1" :src="userInfo.avatar" mode="aspectFit"></image>
                <view class="text-group_3">
                    <text lines="1" class="text_3">{{ userInfo.name }}</text>
                    <text lines="1" class="text_4">{{ userInfo.mobile }}</text>
                </view>
            </view>
            <view class="text-group_4">
                <text lines="1" class="text_5">{{ userInfo.createTime }}</text>
                <text lines="1" class="text_6">来自[{{ userInfo.meetName }}]</text>
            </view>
            <view class="block_3">
                <text lines="1" class="text_7">标签</text>
                <view class="box_6" @tap="editLabel">
                    <mp-icon icon="pencil" color="#1A75FF"></mp-icon>
                </view>
            </view>
            <view class="block_4"></view>
            <view class="block_5">
                <text lines="1" class="text_8">备注: {{ userInfo.remark }}</text>
                <view class="section_4" @tap="editRemark">
                    <mp-icon icon="pencil" color="#1A75FF"></mp-icon>
                </view>
            </view>
            <view class="block_6"></view>
        </view>
    </view>
</template>

<script>
// pages/userInfo/userInfo.js
const defaultAvatarUrl = 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0';
import api from '../../utils/api';
const app = getApp();
export default {
    components: {},
    data() {
        return {
            friendId: '',
            userInfo: {
                id: '',
                name: '-',
                mobile: '-',
                avatar: defaultAvatarUrl,
                createTime: '-',
                meetName: '/',
                remark: '',
                userLabelList: []
            }
        };
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
        var userId = options.id;
        this.setData({
            friendId: userId
        });
        this.queryUserInfo(userId);
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {
        this.queryUserInfo(this.friendId);
    },
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {},
    methods: {
        queryUserInfo(friendId) {
            var that = this;
            uni.showLoading({
                title: '加载中...'
            });
            api.get('/rest/api/queryFriendInfo', {
                friendId: friendId
            })
                .then((res) => {
                    uni.hideLoading();
                    let userInfo = res.data;

                    if (userInfo.avatar == '') {
                        userInfo.avatar = defaultAvatarUrl;
                    }

                    that.setData({
                        userInfo: userInfo
                    });
                })
                .catch((err) => {
                    uni.hideLoading();
                    setTimeout(function () {
                        uni.navigateBack();
                    }, 1200);
                });
        },

        editRemark() {
            var that = this;
            let remark = this.userInfo.remark || '';
            uni.showModal({
                title: '修改备注',
                content: remark,
                editable: true,

                success(res) {
                    if (res.confirm) {
                        var content = res.content.trim();
                        var key_remark = 'userInfo.remark';
                        that[key_remark] = content;
                        that.updateRemark(content);
                    }
                }
            });
        },

        editLabel() {
            uni.setStorageSync('userLabelList', this.userInfo.userLabelList);
            uni.navigateTo({
                url: './editLabel/editLabel?friendId=' + this.friendId
            });
        },

        //更新备注信息
        updateRemark(remark) {
            var that = this;
            uni.showLoading({
                title: '更新中...'
            });
            api.post('/rest/api/updateFriendInfo', {
                friendId: that.friendId,
                remark: remark
            })
                .then((res) => {
                    uni.hideLoading();
                })
                .catch((err) => {
                    uni.hideLoading();
                });
        }
    }
};
</script>
<style>
/* pages/userInfo/userInfo.wxss */
.page {
    background-color: rgba(255, 255, 255, 1);
    position: relative;
    width: 750rpx;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.box_11 {
    display: flex;
    flex-direction: column;
    padding: 60rpx 80rpx 568rpx 80rpx;
}

.block_2 {
    width: 318rpx;
    margin-right: 272rpx;
    flex-direction: row;
    display: flex;
    justify-content: space-between;
}

.single-avatar_1 {
    border-radius: 100%;
    width: 120rpx;
    height: 120rpx;
    display: flex;
    flex-direction: column;
}

.text-group_3 {
    display: flex;
    flex-direction: column;
    margin: 4rpx 0 4rpx 0;
}

.text_3 {
    overflow-wrap: break-word;
    color: rgba(51, 51, 51, 1);
    font-size: 48rpx;
    font-family: PingFangSC-Medium;
    text-align: left;
    white-space: nowrap;
    line-height: 66rpx;
    margin-right: 82rpx;
}

.text_4 {
    overflow-wrap: break-word;
    color: rgba(102, 102, 102, 1);
    font-size: 28rpx;
    font-family: PingFangSC-Regular;
    text-align: left;
    white-space: nowrap;
    line-height: 40rpx;
    margin-top: 6rpx;
}

.text-group_4 {
    display: flex;
    flex-direction: column;
    margin: 50rpx 346rpx 0 0;
}

.text_5 {
    overflow-wrap: break-word;
    color: rgba(51, 51, 51, 1);
    font-size: 48rpx;
    font-family: PingFangSC-Semibold;
    text-align: left;
    white-space: nowrap;
    line-height: 66rpx;
    margin-right: 14rpx;
}

.text_6 {
    overflow-wrap: break-word;
    color: rgba(51, 51, 51, 1);
    font-size: 28rpx;
    font-family: PingFangSC-Regular;
    text-align: left;
    white-space: nowrap;
    line-height: 40rpx;
    margin-top: 6rpx;
}

.block_3 {
    width: 590rpx;
    margin-top: 80rpx;
    flex-direction: row;
    display: flex;
    justify-content: space-between;
}

.text_7 {
    overflow-wrap: break-word;
    color: rgba(51, 51, 51, 1);
    font-size: 28rpx;
    font-family: PingFangSC-Regular;
    text-align: left;
    white-space: nowrap;
    line-height: 40rpx;
    margin-top: 4rpx;
}

.box_6 {
    width: 48rpx;
    height: 48rpx;
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
}

.block_4 {
    width: 590rpx;
    height: 2rpx;
    background-size: 100% 100%;
    margin-top: 26rpx;
    display: flex;
    flex-direction: column;
}

.block_5 {
    width: 590rpx;
    margin-top: 24rpx;
    flex-direction: row;
    display: flex;
    justify-content: space-between;
}

.text_8 {
    overflow-wrap: break-word;
    color: rgba(51, 51, 51, 1);
    font-size: 28rpx;
    font-family: PingFangSC-Regular;
    text-align: left;
    white-space: nowrap;
    line-height: 40rpx;
    margin-top: 4rpx;
}

.section_4 {
    width: 48rpx;
    height: 48rpx;
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
}

.block_6 {
    width: 590rpx;
    height: 2rpx;
    background-size: 100% 100%;
    margin-top: 26rpx;
    display: flex;
    flex-direction: column;
}
</style>
